<template>
	<view class="boxs">
		<view class="boxses">
			<image @click="onPage01" src="/static/index-list-01.png" mode=""></image>
			<p class="box-title">软装锦囊</p>
		</view>
		<view class="boxses">
			<image class="onPage02" src="/static/index-list-02.png" mode=""></image>
			<p class="box-title">热门同款</p>
		</view>
		<view class="boxses">
			<image class="onPage03" src="/static/index-list-03.png" mode=""></image>
			<p class="box-title">最新资讯</p>
		</view>
		<view class="boxses">
			<image class="onPage04" src="/static/index-list-04.png" mode=""></image>
			<p class="box-title">精选推荐</p>
		</view>
		<view class="boxses">
			<image class="onPage05" src="/static/index-list-05.png" mode=""></image>
			<p class="box-title">话题榜单</p>
		</view>
	</view>
</template>

<script>
	export default {
		methods:{
			onPage01(){
				uni.navigateTo({
					url:'/pages/sicence/sicence'
				})
			},
			onPage02(){
				uni.navigateTo({
					url:''
				})
			},
			onPage03(){
				uni.navigateTo({
					url:'/pages/lastestnews/lastestnews'
				})
			},
			onPage04(){
				uni.navigateTo({
					url:''
				})
			},
			onPage05(){
				uni.navigateTo({
					url:''
				})
			}
		}
	}
</script>

<style lang="scss">
.boxs{
	width: 100%;
	height: 200rpx;
	display: flex;
	.boxses{
		display: flex;
		flex-direction: column;
		width:20%;
		align-items: center;
		justify-content: center;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 30rpx;
		}
		.box-title{
			font-size: 24rpx;
			font-weight: 700;
			margin-top: 20rpx;
		}
	}
}
</style>